<template>
  <div class="modelingSettings">
    <ul class="header">
      <li :class="defaultData.tabsKey === '1'?'active':''" @click="HandleChange('1')">
        <a-tooltip content="属性">
          <icon-settings/>
        </a-tooltip>
      </li>
      <li :class="defaultData.tabsKey === '2'?'active':''" @click="HandleChange('2')">
        <a-tooltip content="几何组件">
          <icon-common/>
        </a-tooltip>
      </li>
      <li :class="defaultData.tabsKey === '3'?'active':''" @click="HandleChange('3')">
        <a-tooltip content="材质组件">
          <icon-experiment/>
        </a-tooltip>
      </li>
      <li :class="defaultData.tabsKey === '4'?'active':''" @click="HandleChange('4')">
        <a-tooltip content="动画组件">
          <icon-live-broadcast/>
        </a-tooltip>
      </li>
    </ul>
    <div class="content">
      <template v-if="defaultData.tabsKey === '1'">
        <a-form :model="object3D" auto-label-width size="mini">
          <a-form-item field="type" label="类型">
            <a-input v-model="object3D.type" disabled/>
          </a-form-item>
          <a-form-item field="uuid" label="识别码">
            <a-input v-model="object3D.uuid" disabled/>
          </a-form-item>
          <a-form-item field="name" label="名称">
            <a-input v-model="object3D.name"/>
          </a-form-item>
          <a-form-item label="位置" :content-flex="false">
            <a-space direction="vertical" fill>
              <a-form-item field="position.x" label="X">
                <a-input-number v-model="object3D.position.x" :precision="2" />
              </a-form-item>
              <a-form-item field="position.y" label="Y">
                <a-input-number v-model="object3D.position.y" :precision="2" />
              </a-form-item>
              <a-form-item field="position.z" label="Z">
                <a-input-number v-model="object3D.position.z" :precision="2" />
              </a-form-item>
            </a-space>
          </a-form-item>
          <a-form-item label="旋转" :content-flex="false">
            <a-space direction="vertical" fill>
              <a-form-item field="rotation.x" label="X">
                <a-input-number v-model="object3D.rotation.x" :precision="2" >
                  <template #suffix>
                    °
                  </template>
                </a-input-number>
              </a-form-item>
              <a-form-item field="position.y" label="Y">
                <a-input-number v-model="object3D.rotation.y" :precision="2" >
                  <template #suffix>
                    °
                  </template>
                </a-input-number>
              </a-form-item>
              <a-form-item field="position.z" label="Z">
                <a-input-number v-model="object3D.rotation.z" :precision="2" >
                  <template #suffix>
                    °
                  </template>
                </a-input-number>
              </a-form-item>
            </a-space>
          </a-form-item>
          <a-form-item label="缩放" :content-flex="false">
            <a-space direction="vertical" fill>
              <a-form-item field="scale.x" label="X">
                <a-input-number v-model="object3D.scale.x" :precision="2" />
              </a-form-item>
              <a-form-item field="position.y" label="Y">
                <a-input-number v-model="object3D.scale.y" :precision="2" />
              </a-form-item>
              <a-form-item field="position.z" label="Z">
                <a-input-number v-model="object3D.scale.z" :precision="2" />
              </a-form-item>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {computed, reactive} from "vue";
import {useThreeDimensional} from "../../../storage/models/threeDimensional";

const threeDStore = useThreeDimensional();
const defaultData = reactive({
  tabsKey: "1",
})

const defaultProperty = reactive({})

const object3D = computed(() => {
  return threeDStore.element
})


// setInterval(()=>{
//   console.log(object3D)
// },5000)
const HandleChange = (value: string) => {
  defaultData.tabsKey = value;
}
</script>
<style lang="less" scoped>
.modelingSettings {
  > .header {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    height: 40px;

    > li {
      flex: 1;
      height: 100%;
      background-color: #365b77;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      cursor: pointer;

      &.active {
        color: rgb(var(--orange-6));
      }
    }
  }

  > .content {
    padding: 10px;
  }

}
</style>
